<template>
  <div class="film_index">
    <div class="film_header"></div>
    <!-- 图片详情 -->
    <div class="film_Card">
      <img :src="film.cover" width="100%" height="100%" alt="" />
    </div>
    <div class="film-des">
      <!-- 评分 -->

      <div class="all">
        <div class="p1">
          {{ film.name }}
        </div>
        <el-rate
          v-model="value"
          disabled
          show-text
          text-color="#ff9900"
          score-template="{value}"
        >
        </el-rate>
      </div>

      <div class="film_introduce">
        <div class="p2">电影类型：{{ film.type }}</div>
        <div class="p2">{{ film.region }}/{{ film.duration }}分钟</div>
        <div class="p2">上映日期：{{ film.releaseTime }}</div>
      </div>

      <div class="btn">
        <router-link
          style="margin-right: 20px"
          :to="'/film/ticket?fid=' + filmId"
        >
          <el-button type="danger">
            <i class="rl-icon-s-finance"></i>特惠购票
          </el-button>
        </router-link>
        <el-button @click="openComment" type="danger">
          <i class="rl-icon-star-on"></i>评分
        </el-button>
      </div>
    </div>

    <div class="film_content">
      <router-view />
    </div>

    <el-dialog
      title="电影评分"
      :visible.sync="dialogVisible"
      width="30%"
      :show-close="false"
    >
      <div class="block">
        <el-rate v-model="form.star" :colors="colors"></el-rate>
      </div>
      <el-input
        style="margin-top: 20px"
        type="textarea"
        :rows="8"
        placeholder="请输入内容"
        v-model="form.comment"
        resize="none"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitComment">确 认 提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { FindFilmById, AddFilmEvaluate } from "@/api/film";

export default {
  data() {
    return {
      film: {
        // cover_show: require("../../assets/filmImg/xxyw.jpg"),
        // name: "小小愿望",
        // type: "亲情",
        // region: "中国大陆",
        // duration: "130分钟",
        // releaseTime: "2021-9-15上映",
      },
      value: 3,
      filmId: this.$route.query.fid,
      dialogVisible: false,
      form: {
        fid: "",
        uid: "",
        star: 0,
        comment: "",
      },
      value: 0,
      dialogVisible: false,
      colors: ["#99A98F", "#F7BA2A", "#FF9900"],
      login: true,
      filmId: this.$route.query.fid,
    };
  },
  mounted() {
    this.queryFilmDetail();
    // console.log("我取到了后台地址");
    // console.log(config.API_URL);
  },

  methods: {
    //查询电影详情
    queryFilmDetail() {
      FindFilmById().then((res) => {
        if (res.code == 200) {
          this.film = res.data;
          // this.film.cover_show =
          //   config.API_URL + "/upload?id=" + this.film.cover;
        }
      });
    },
    openComment() {
      if (!localStorage.getItem("uid")) {
        this.$confirm("系统还没有检测到您的登录信息，是否去登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消为电影评分",
            });
          });
      } else {
        this.dialogVisible = true;
      }
    },
    submitComment() {
      this.form.fid = this.filmId;
      this.form.uid = localStorage.getItem("uid");
      const form = this.form;
      AddFilmEvaluate(form).then((res) => {
        if (res.code == 200) {
          this.dialogVisible = false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped type="text/css">
.film_index {
  overflow-x: hidden;
  .film_header {
    position: relative;
    width: 100%;
    height: 350px;
    background: #5a84fd;
    margin-top: 12px;
  }
  .film_Card {
    width: 240px;
    height: 330px;
    background: #ffffff;
    margin-right: 100px;
    margin-left: 190px;
    position: absolute;
    overflow: hidden;
    top: 160px;
    z-index: 999;
  }
  .film-des {
    // width: 1024px;
    margin-left: 500px;
    position: absolute;
    overflow: hidden;
    top: 150px;
    z-index: 999;
    // background: pink;
    .all {
      width: 350px;
      height: 100px;
      //   background: plum;
      .p1 {
        // background: blue;
        float: left;
        font-weight: bolder;
        letter-spacing: 3px; //字符间距
        color: #ffffff;
        font-size: 30px;
        padding-top: 20px;
        padding-bottom: 10px;
      }
      .el-rate {
        float: right;
        padding-top: 25px;
        margin-left: 20px;
        //   padding-left: 50px;
      }
    }
    .film_introduce {
      float: left;
      .p2 {
        width: 200px;

        font-size: 14px;
        padding-top: 20px;
        letter-spacing: 2px;
        color: #ffffff;
      }
    }
    .btn {
      width: 500px;
      height: 75px;
      //   background: red;
      margin-top: 120px;
      padding-top: 30px;
      .el-button {
        width: 120px;
        height: 45px;
        float: left;
        margin-right: 50px;
        // line-height: 40px;
        letter-spacing: 2px;
      }
    }
  }
  .film_content {
    padding: 80px 200px;
    letter-spacing: 2px;
  }
}
</style>